<template>
  <div class="margin_30">
    <el-card shadow="never" :body-style="{padding:'20px'}" style="margin-bottom:30px">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" size="mini" :inline="true">
        <el-row :gutter="20">
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-input
                v-model="form.orderSn"
                placeholder="订单编号"
              />
            </el-form-item>
          </el-col>
          <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-select v-model="form.status" placeholder="订单状态" clearable filterable>
                <el-option
                  label="待处理"
                  value="0"
                />
                <el-option
                  label="退货中"
                  value="1"
                />
                <el-option
                  label="已完成"
                  value="2"
                />
                <el-option
                  label="已拒绝"
                  value="3"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-button @click="resetReturnOrder">重置</el-button>
              <el-button type="primary" @click="searchReturnOrders">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <el-table :data="list" border stripe height="550">
        <el-table-column
          label="#"
          width="50"
          type="index"
          fixed="left"
        />
        <el-table-column
          prop="orderSn"
          label="订单编号"
          align="center"
          width="200"
        />
        <el-table-column
          prop="status"
          label="退单状态"
          width="150"
          align="center"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" effect="dark">
              待处理
            </el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning" effect="dark">
              退货中
            </el-tag>
            <el-tag v-else-if="scope.row.status === 2">
              已完成
            </el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="info">
              已拒绝
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="description"
          label="描述"
          width="180"
          align="center"
        />

        <el-table-column
          prop="reason"
          label="退单原因"
          width="180"
          align="center"
        />

        <el-table-column
          prop="productName"
          label="商品名称"
          width="180"
          align="center"
        />

        <el-table-column
          prop="productAttr"
          label="商品属性"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            <div>
              <div v-for="(item,index) in scope.row.productAttr" :key="index">
                <span>{{ item.key }}:</span>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="handleNote"
          label="商家备注"
          width="180"
          align="center"
        />

        <el-table-column
          prop="createTime"
          label="添加时间"
          width="180"
          align="center"
        />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-view" size="small" @click="goReturnInfo(scope.row.id)">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="paginationParams.start"
        :page-sizes="paginationParams.pageSize"
        :page-size="paginationParams.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { findReturnApply } from '@/api/order/back'
import mix from '@/mixins'
export default {
  mixins: [mix],

  data() {
    return {
      form: {
        'createTime': '',
        'handleTime': '',
        'memberUsername': '',
        'orderId': '',
        'orderSn': '',
        'status': ''
      },
      list: []
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    init() {
      findReturnApply(this.paginationParams.start, this.paginationParams.limit, this.form)
        .then(res => {
          console.log(res)
          res.data.rows.forEach(ele => {
            ele.productAttr = JSON.parse(ele.productAttr)
          })
          this.list = res.data.rows
          this.paginationParams.total = res.data.total
        })
    },
    // 每页多少条改变时触发（main.js中切换页码中文）
    handleSizeChange(e) {
      this.paginationParams.limit = e
      this.init()
    },
    // 当前页码发生改变触发
    handleCurrentChange(e) {
      this.paginationParams.start = e
      this.init()
    },
    searchReturnOrders() {
      this.init()
    },
    resetReturnOrder() {
      this.form = {}
      this.init()
    },
    goReturnInfo(id) {
      this.$router.push(`/order/back/info/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
